<template>
  <div class="maxBox">
    <div class="border">
      <div class="header">
        <h2>登录账号</h2>
        <p>虾米 - 严选商城欢迎你</p>
      </div>
      <!-- 封装输入框 -->
      <LoginInput v-model="mobile" @input="mobileChange" :flag="mobileFlag">
        <template #icon>
          <van-icon name="phone-o" />
        </template>
      </LoginInput>

      <LoginInput
        :type="pas"
        v-model="password"
        @input="passwordHand"
        :flag="pasFlag"
      >
        <template #icon>
          <van-icon
            v-if="pas != 'text'"
            @click="pas = 'text'"
            name="closed-eye"
          />
          <van-icon v-else @click="pas = 'password'" name="eye-o" />
        </template>
      </LoginInput>
      <van-button
        class="loginBtn"
        color="linear-gradient(to right, #c76ad7, #92d2ec)"
        @click="loginChange"
      >
        登录
      </van-button>
    </div>
  </div>
</template>

<script>
import LoginInput from "../../components/loginInput.vue";
import { login } from "@/network/request.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      password: "",
      mobile: "",
      mobileFlag: 0, // 0 什么状态都没有 1 成功 2 失败
      pasFlag: 0,
      pas: "password",
      beforeUrl: "", // 确认上一级是否是 详情页
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 这样可以给data中的数据赋值
      vm.beforeUrl = from.path;
    });
  },
  methods: {
    //   手机号触发
    mobileChange() {
      let mobileReg =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      if (mobileReg.test(this.mobile)) {
        this.mobileFlag = 1;
      } else {
        this.mobileFlag = 2;
      }

      console.log(this.mobileFlag);
    },
    passwordHand() {
      let pas =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/;
      if (pas.test(this.password)) {
        this.pasFlag = 1;
      } else {
        this.pasFlag = 2;
      }
    },
    //登录
    loginChange() {
      console.log(this.beforeUrl);
      login({ mobile: this.mobile, pwd: this.password }).then(({ data }) => {
        if (data.msg == "success") {
          localStorage.setItem("token", JSON.stringify(data.data.token));
          console.log(this.$route);
          if (this.beforeUrl == "/detail") {
            this.$router.push({
              path: "/detail",
              query: { id: this.$route.query.id },
            });
          } else {
            this.$router.push({ path: "/Home" });
          }
          Toast.success("登录成功");
        } else {
          Toast.success(data.msg);
        }
      });
    },
  },
  components: { LoginInput },
};
</script>

<style lang="scss" scoped>
.maxBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  .border {
    width: 100%;
    height: 100%;
    border: 2px solid rgb(219, 218, 218);
    padding: 0 25px;
  }
  .loginBtn {
    width: 80%;
    margin-left: 32px;
    margin-top: 20px;
  }
  .header {
    width: 100%;
    height: 8.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
